<template>
    <div class="quiz-share">
			<!-- <y-nav title="超准！十道题看透你的爱情观"></y-nav> -->
        <img src="../assets/quiz_desc.png" alt="" class="quiz-desc" :class="{marginForX: $utils.isIphoneX()}">
        
		<deeper-link :activity-channel='activityChannel' :copy-text="activityChannel">
			<div class="start-quiz" :class="{startMarginX: $utils.isIphoneX()}" slot="deep-slot">
				<div class="start-quiz-back" :style="backActiveStyle">下载拾恋APP<br><span>开启测试</span></div>
				<div class="start-quiz-front clipboardBtn" :style="activeStyle"  @click="handleClick">下载拾恋APP<br><span>开启测试</span></div>
			</div>
		</deeper-link>
    </div>
</template>
<script>
let u = navigator.userAgent;
import code from './data/code.json';
import DeeperLink from '@/components/deeper-link';
import Nav from '@/components/nav';
import shareData from './data/shareData.js';
export default {
	components: {
		[DeeperLink.name]: DeeperLink,
		[Nav.name]: Nav
    },
    data() {
        return {
            activeStyle: {},
			backActiveStyle: {},
			activityChannel: '',
			shareData,
        }
    },
    methods: {
       handleClick() {
           if (u.indexOf('iPhone') > -1) {
                window.location.href = 'itms-apps://itunes.apple.com/WebObjects/MZStore.woa/wa/viewSoftware?id=1438503085'
            } else {
				window.location.href = 'https://sj.qq.com/myapp/detail.htm?apkName=com.yryz.lovelorn'
            }
		},
		// 微信二次分享
		wxShareTwice() {
			let { title, content, url, imgUrl} = this.shareData;
			if (this.$utils.isWeiXin()) {
				this.$utils.wxShare({
					title,
					desc: content,
					link: url,
					imgUrl
				})
			}
		},
		// 统计进入落地页次数
		enterSharePage() {
			this.$http.post('/lovelorn/v1.3/pb/activity-testing-infos/action/open', {
				activityCode: code.activityCode
			})
		}
	},
	computed: {
	},
	created() {
		this.wxShareTwice();
		this.enterSharePage();
		// let address = window.location.href.match(/SL-\w*-\d*/i);
		this.activityChannel = this.$route.params.channel;
	},
}
</script>
<style>
.quiz-share {
	background-image: url('../assets/quiz_start_bg.png');
	background-repeat: no-repeat;
	background-size: cover;
	height: 100vh;

   & .quiz-desc{
       width: 5.98rem;
       height: 4.69rem;
	   margin-left: 0.8rem;
	   position: absolute;
	   bottom: 3rem;
   }
   & .start-quiz {
        margin-left: 56%;
        margin-top: 10%;
        padding-bottom: 12%;
        text-align: center;
        display: flex;
		font-size: 0.3rem;
		position: absolute;
	    bottom: .3rem;
   }
   & .marginForX {
		bottom: 4rem;
   }
   & .startMarginX {
		bottom: 1rem;
   }
   & .start-quiz-back{
       font-family: happyfont;
       background: #f4d114;
       border: 3px solid #000;
       height: 1.1rem;
       padding: 0.05rem 0.2rem 0;
   }
   & .start-quiz-front{
       font-family: happyfont;
       margin-top: 10%;
       background: #fff;
       border: 3px solid #000;
       text-align: center;
        height: 1.1rem;
		padding: 0.05rem 0.2rem 0;
         margin-top: -3%;
        margin-left: -75.5%;
   }
}
</style>

